<template>
   <div id="pagination-table-con">
      <banner :title="'动态字段表格'" :des="'可切换字段的表格'"></banner>
      <el-table-pagination :data="tableData" @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :page-sizes="[5, 10, 30]" :page-size.sync="currentPageSize" :current-page.sync="currentPage" :total="total">
         <el-table-column label="序号" type="index"></el-table-column>
         <el-table-column label="姓名" prop="name"></el-table-column>
         <el-table-column label="年龄" prop="age"></el-table-column>
      </el-table-pagination>
   </div>
</template>

<script>
import ElTablePagination from '@/components/table-pagination'
import banner from '@/components/banner'
export default {
   components: {
      ElTablePagination, banner
   },
   data(){
      return{
         total: 200,
         currentPageSize: 5,
         currentPage: 0,
         tableData: [
            { name: '张三', age: 23 },
            { name: '张三', age: 23 },
            { name: '张三', age: 23 },
            { name: '张三', age: 23 },
            { name: '张三', age: 23 },
         ]
      }
   },
   watch: {
      currentPageSize(){
         console.log(this.currentPageSize)
      },
      currentPage(){
         console.log(this.currentPage)
      }
   },
   methods: {
      handleSizeChange(){
         // 后端请求更改limit属性，将返回的值赋值给tableData
      },
      handleCurrentChange(){
         // 后端请求更改page属性，将返回的值赋值给tableData
      },
   }
}
</script>